<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">
                <el-form-item label="注册手机号">
                  <el-input v-model="searchModel.mobile" placeholder="注册手机号"></el-input>
                </el-form-item>
                <el-form-item label="合伙人编号">
                  <el-input v-model="searchModel.partnerId" placeholder="合伙人编号"></el-input>
                </el-form-item>

                <el-form-item label="企业名称">
                  <el-input v-model="searchModel.businessName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="申请状态">
                  <el-radio-group @change="search" v-model="searchModel.auditStatus">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="auditing">待审核</el-radio-button>
                    <el-radio-button label="normal">已通过</el-radio-button>
                    <el-radio-button label="fail">未通过</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item >
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table size="mini" v-loading="loading" :data="list" style="width: 100%">
              <el-table-column prop="auditSubmitTime" label="申请时间">
              </el-table-column>
              <el-table-column label="申请编号" prop="id">
              </el-table-column>
              <el-table-column label="注册手机号" prop="mobile">
              </el-table-column>
              <el-table-column label="企业名称" prop="businessName">
              </el-table-column>
              <el-table-column label="合伙人编号" prop="partnerId">
              </el-table-column>
              <el-table-column label="申请状态">
                <template slot-scope="scope">
                  <span class="text-primary" v-if="scope.row.auditStatus === 'auditing'">审核中</span>
                  <span class="text-success" v-if="scope.row.auditStatus === 'normal'">已通过</span>
                  <div v-if="scope.row.auditStatus === 'fail'"><span class="text-danger">未通过</span>
                    <div v-if="scope.row.auditMessage"> ({{ scope.row.auditMessage }})</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="申请费率" width="100">
                <template slot-scope="scope">
                  {{ scope.row.serviceRatio }} %
                </template>
              </el-table-column>

              <el-table-column prop="businessLicense" label="营业执照">
                <template slot-scope="scope">
                  <el-image
                    v-if="scope.row.businessLicense"
                    class="images-body"
                    :src="scope.row.businessLicense"
                    :preview-src-list="[scope.row.businessLicense]"
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="bizSceneDesc" label="业务说明">
                <template slot-scope="scope">
                  <el-image
                    v-if="scope.row.bizSceneDesc"
                    class="images-body"
                    :src="scope.row.bizSceneDesc"
                    :preview-src-list="[scope.row.bizSceneDesc]"
                  ></el-image>
                </template>
              </el-table-column>

             
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <div class="cz-button">
                    <div v-if="scope.row.auditStatus === 'auditing'">

                      <el-popover placement="top" width="200" :ref="'auditSuccess' + scope.row.id" trigger="click">
                        <p>是否审核通过？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="
                            $refs['auditSuccess' + scope.row.id].doClose()
                            ">取消</el-button>
                          <el-button :loading="opLoading" type="primary" size="mini"
                            @click="businessAuditSuccess(scope.row.id)">确定</el-button>
                        </div>
                        <el-button v-permission="['ADMIN', 'partner-user-filings::audit-success']" size="mini"
                          type="primary" slot="reference" :value="scope.row.id">
                          通过
                        </el-button>
                      </el-popover>
                    </div>

                    <el-button style="margin-top:8px" v-if="scope.row.auditStatus === 'auditing'"
                      v-permission="['ADMIN', 'partner-user-filings::audit-fail']" size="mini" type="danger"
                      @click="businessAuditFail(scope.row)">
                      拒绝
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="searchModel.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="searchModel.count">
              </el-pagination>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 审核失败 -->
    <el-dialog title="审核失败" :close-on-click-modal="false" :modal-append-to-body="false" width="50%"
      :visible.sync="dialogFailVisible">
      <el-input type="text" v-model="auditFailForm.auditMessage" placeholder="请输入审核失败原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFailVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAuditFail" :loading="opFailLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 注册商户后续信息 -->
    <el-dialog title="商户信息" :close-on-click-modal="false" :modal-append-to-body="false" class="dialog-action"
      width="50%" :visible.sync="dialogRegisterInfo" @close="closeEv">
      <el-form :model="registerForm" label-width="100px" ref="successRegisterForm">
        <el-form-item label-width="28px">
          <el-button :loading="opLoading" type="primary" @click="doCopy($event)">复制</el-button>
        </el-form-item>
        <el-form-item label="商户名称:">
          <span>{{ successRegisterForm.name }}</span>
        </el-form-item>

        <el-form-item label="商户平台:">
          <span>{{ successRegisterForm.website }}</span>
        </el-form-item>

        <el-form-item label="商户账号:">
          <span>{{ successRegisterForm.mobile }}</span>
        </el-form-item>

        <el-form-item label="初始密码:">
          <span class="text-danger">{{ successRegisterForm.password }}</span>
        </el-form-item>

        <el-form-item label="开发平台:">
          <span>{{ successRegisterForm.openDomain }}</span>
        </el-form-item>

        <el-form-item label="接口网关:">
          <span>{{ successRegisterForm.openapiDomain }}</span>
        </el-form-item>

        <el-form-item label="温馨提示:">
          <span class="text-info">商户平台账号已经开通，请前往商户平台签约支付宝账号（批量有密/安全发）
            通过接口对接的商户，也需要先完成支付宝账号签约，再进行接口对接使用。</span>
        </el-form-item>

      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button :loading="opLoading" type="primary" @click="doCopy($event)">复制</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>


<script>
import {
  searchUserFilings,
  userFilingsAuditSuccess,
  userFilingsAuditFail

} from "@/api/business";
const defaultModel = {
  mobile: null,
  auditStatus: "auditing",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
import clipboard from "../../utils/clipboard";
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: {},
      opLoading: false,

      auditFailForm: {},
      dialogFailVisible: false,
      opFailLoading: false,
      dialogRegisterInfo: false, //注册成功信息
      successRegisterForm:{}
    };
  },

  components: {},
  methods: {
    //审核通过
    businessAuditSuccess(id) {
      this.opLoading = true;
      userFilingsAuditSuccess({ id }).then(resp => {
        console.log('555555555',resp)
        this.dialogRegisterInfo = true
        // if (resp.success) {
        //   this.$notify({
        //     title: "操作成功",
        //     type: "success",
        //     duration: 2500,
        //   });
        //   this.$refs["auditSuccess" + id].doClose();
        //   this.search();
        // } else {
        //   this.$message.error(resp.resultMessage);
        // }
        this.opLoading = false;
      }).catch(err => {

      })


    },
    //审核失败
    businessAuditFail(row) {
      this.dialogFailVisible = true;
      this.auditFailForm = _.cloneDeep(row);
    },
    //确定审核失败
    sureAuditFail() {
      this.opFailLoading = true;
      let form = {
        id: this.auditFailForm.id,
        auditMessage: this.auditFailForm.auditMessage
      }
      userFilingsAuditFail(form).then(resp => {
        if (resp.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
          this.dialogFailVisible = false;
          this.search();
        } else {
          this.$message.error(resp.resultMessage);
        }
        this.opFailLoading = false;
      }).catch(err => {

      })

    },


    openLoginDialog(row) {
      this.loginDialog = true;
      this.loginForm = _.cloneDeep(row);
    },

    search() {
      this.getList(1);
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }

      let searchModel = _.cloneDeep(this.searchModel);
      searchUserFilings(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList();
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;
      return searchModel;
    },
    //修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.getList(1);
    },

     //复制链接
     doCopy(e) {
      let name = "商户名称：" + this.successRegisterForm.name
      let website = "商户平台：" + this.successRegisterForm.website
      let mobile = "商户账号：" + this.successRegisterForm.mobile
      let password = "初始密码：" + this.successRegisterForm.password
      let openDomain = "开发平台：" + this.successRegisterForm.openDomain
      let openapiDomain = "接口网关：" + this.successRegisterForm.openapiDomain
      let tip = "温馨提示：商户平台账号已经开通，请前往商户平台签约支付宝账号（批量有密/安全发）通过接口对接的商户，也需要先完成支付宝账号签约，再进行接口对接使用"
      // let signDoc = "签约文档：https://www.yuque.com/alipaybhd8fvdaz5/lbezo6/ve7wbqig0mmhradp?singleDoc# 《企业支付宝签约安全发流程》 密码：tye6。"
      // let apiDoc = "接口文档：https://www.yuque.com/alipaybhd8fvdaz5/vkeaph# 《安全发接口文档》 密码：yf96"

      let info = name + "\n" + website + "\n" + mobile + "\n" + password + "\n" +openDomain + "\n" +openapiDomain + "\n" + tip ;
      clipboard(info, e);
    },

    closeEv(){
      this.search();
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss">
.submitUserFilingsDialog {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 246px;
    height: 138px;
    line-height: 138px;
    background-color: #fff;
    text-align: center;
  }

  .avatar {
    width: 246px;
    height: 138px;
    display: block;
  }
}
</style>
<style lang="scss" scoped>
.operations {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
